<template>
  <div class="wrapper">
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="编号" prop="number">
          <el-input v-model="queryParams.number" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="说明" prop="source_info">
          <el-input v-model="queryParams.title" placeholder="请输入" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList"><span style="color: white; font-weight: bold; ">搜索</span></el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <!-- <el-button type="danger" plain size="mini" @click="handleDeleteAll">清空日志</el-button> -->
        </el-form-item>
      </el-form>
      <p style="font-size: 18px; font-weight: bold; color: #006400; margin-top: 0px !important;">
        前台的打开方式: 必须使用手机端访问绑定好的域名加/前台入口, 比如:
        <span style="color: black; font-size: 16px;">example.com/xxx</span>,
        默认会拦截VPN访问, 测试的时候你可以点击源码配置来关闭IP过滤(发送的时候要开启IP过滤)
      </p>
      <p style="font-size: 18px; font-weight: bold; color: rgb(43,39,39);">如果前台域名提示不安全，你需要点击左下角的申请证书，为域名申请一个证书。 如果你没有正确打开前台，可以在绑定域名后访问域名，然后点击【访问日志】来查看拦截原因，并根据日志提示操作</p>
      <p style="font-size: 18px; font-weight: bold; color: rgb(223,21,21);">如果遇到任何错误，请尽量截图错误提示(或者描述清楚具体情况)后联系我。</p>
    </div>
    <div class="domain-list domain-card">
      <DomainCard class="domain-card-item" v-for="domain in dataList" :key="domain.id" :domain_id="domain.id" :number="domain.number" :source_info="domain.source_info" :enter_url="domain.enter_url" :domain_url="domain.domain_url" :detail="domain" :refreshList="getList"/>
    </div>

  </div>
</template>

<script>
import DomainCard from './DomainCard.vue';
import { sourceCodesList } from '@/api/tool/dataSearch';
export default {
  components: {
    DomainCard,
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        source_info: undefined,
        number: undefined,
      },
      dataList: [],
      domain:{
        id: undefined,
        title: undefined
      }
    };
  },
  methods: {
    getList() {
      sourceCodesList({
        source_info: this.queryParams.source_info,
        number: this.queryParams.number,
        status: this.queryParams.status,
        domain_url: this.queryParams.domain_url,
      }).then(res => {
        console.log(res)
        this.dataList = res
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
  }
};

</script>

<style>
.wrapper {
  padding: 32px;
}

.domain-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 600px; /* 或者根据您的页面布局调整最大高度 */
  overflow-y: auto; /* 允许垂直方向上的滚动 */
  overflow-x: hidden; /* 防止水平滚动 */
}

.domain-card-item {
  background-color: #f9f9f9; /* 设置背景颜色为浅灰色 */
}

.domain-card {
  flex: 0 1 calc(25% - 20px);
  /* 每个元素占容器宽度的 25% 减去一些间距 */
  margin: 10px;
  /* 添加间距 */
  height: 360px; /* 固定高度 */
}

</style>
